<template lang="pug">
el-dialog(title="关联商品" :visible.sync="goodslist" :before-close="close" @selection-change="hsc" append-to-body)
    el-form(v-model="f")
        el-form-item
            el-button(type="primary" style="margin-right:30%;" @click="savechange") 选择
            el-input(style="width:20%;margin-left:3%" placeholder="商品名称" v-model="sname")
            el-input(style="width:20%;margin-left:3%" placeholder="商品编号" v-model="sgid")
            el-button(type="primary" icon="el-icon-search" style="margin-left:3%" @click="search") 查询
    el-table(:data="gds" style="width:100%" height="350" @selection-change="hsc" tooltip-effect="dark" v-loading="loading" element-loading-text="数据加载中...")
        el-table-column(type="selection" width="55")
        el-table-column(prop="thumImage" label="图片")
            template(slot-scope="scope")
                img(:src="scope.row.thumImage" style="width:100px;vertical-align: middle;")
        el-table-column(prop="name" label="商品名称")
        el-table-column(prop="price" label="销售价格")
    el-row
        el-pagination(@size-change="handleSizeChange" @current-change="handleCurrentChange" style="float:right"
        :current-page="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="count")
</template>
<script>
    export default{
        data(){
            return{
                goodslist:false,
                sname:'',
                sgid:'',
                f:{},
                gds:[],
                count:0,
                currentPage:1,
                selection:[],
                loading:false
            }
        },
        computed:{
            getstate(){
                return this.$store.state.goodslistclass;
            },
            getchange(){
                return this.$store.state.goodslist;
            }
        },
        watch:{
            getstate(v){
                this.gds=[]
                this.goodslist=v
                this.getData()
            },
            getchange(v){
                console.log(v)

            }
        },
        methods:{
            close(){
                this.gds=[]
                this.$store.state.goodslistclass=false
            },
            search(){
                if(this.sname==''&&this.sgid==''){
                    this.getData()
                    return
                }
                var pa=new URLSearchParams()
                if(this.sname){
                    pa.append('name',this.sname)
                }
                if(this.sgid){
                    pa.append('goodsId',this.sgid)
                }
                this.getData(pa)
            },
            handleSizeChange(i){
                var pa=new URLSearchParams()
                pa.append('pageNo',i)
                this.getData(pa)
            },
            handleCurrentChange(i){
                var pa=new URLSearchParams()
                pa.append('pageNo',i)
                this.getData(pa)
            },
            hsc(v){
                this.selection=v
            },
            getData(v){
                var _this=this
                this.loading=true
                this.tableData3=[]
                axios.get('/listXcxGoods.do',{params:v}).then(r=>{
                    // console.log(r)
                    if(r.data.code!=200){
                        return
                    }
                    _this.gds=[].concat(r.data.response.xcxGoodsList)
                    _this.count=r.data.response.page.totalCount
                    _this.loading=false
                })
            },
            savechange(){
                if(this.selection.length>1){
                    this.$message({
                        message:'只能选择一项',
                        type:'info'
                    })
                }
                // console.log("this.selection",this.selection)
                var ee=this.selection[0].goodsId
                this.$emit("getgoodsid",ee)
                this.goodslist=false
                this.close()
            }
        }
    }
</script>
<style>

</style>
